<template>
    <view class="my-user">
        <view class="card">
            <view class="item ava">
                <view class="l">
                    <text class="name">我的头像</text>
                </view>
                <view class="r" @click="upload">

                    <img style="width: 120rpx;height: 120rpx;border-radius: 50%;" v-if="userInfo.userAvatar" :src="userInfo.userAvatar" alt="" >
                    <img style="width: 120rpx;height: 120rpx;border-radius: 50%;" v-if="!userInfo.userAvatar" src="https://wish-1300401836.cos.ap-beijing.myqcloud.com/default_ava.png" alt="" >
					<img class="right" src="@/assets/images/cheveron-right.png" alt="">
                </view>
            </view>

            <view class="item input">
                <view class="l">
                    <text class="name">我的简介</text>
                </view>
                <view class="r">
                    <input type="text" v-model="userInfo.userSign" placeholder="请输入我的简介" placeholder-style="color:#E2E2E2;">
                </view>
            </view>
            <view class="item input">
                <view class="l">
                    <text class="name">昵称</text>
                </view>
                <view class="r">
                     <input type="text"  v-model="userInfo.name"  placeholder="请输入昵称" placeholder-style="color:#E2E2E2;">
                </view>
            </view>
            <view class="item input">
                <view class="l">
                    <text class="name">性别</text>
                </view>
                <view class="r">
                    <picker  v-model="userInfo.userSex"  @change="bindSexPickerChange" :value="index" :range="array">
						<view class="uni-input" :class="!index ? 'default' : false">{{ array[index] }}</view>
					</picker>
                </view>
            </view>
            <view class="item input">
                <view class="l">
                    <text class="name">手机号</text>
                </view>
                <view class="r">
                    <text  placeholder="手机号" placeholder-style="color:#E2E2E2;">{{userInfo.userPhone}}</text>
                </view>
            </view>
            <view class="item input">
                <view class="l">
                    <text class="name">实名认证</text>
                </view>
                <view class="r">
                    <text v-if="userInfo.authentication && userInfo.authentication===1" class="error" style="color: #FD6564;">已认证</text>
                    <text v-if="!userInfo.authentication || userInfo.authentication===0" class="error" style="color: #FD6564;">未认证</text>
                </view>
            </view>
        </view>

        <view class="btn" style="margin-top: 56rpx;">
            <Button @click="updateUserInfo()">保存</Button>
        </view>
       <view class="btn" style="margin-top: 56rpx">
            <Button @click="loginout()">退出登录</Button>
        </view>
    </view>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, onUnmounted } from 'vue';
import Button from '@/components/Button.vue'
import Api from '@/apis/api';
import { uploadImage  } from '@/utils/uploadResToCos'
import { showLoading, showToast } from '@/utils/prompt';
import { useUserStore } from '@/store/user';
const userStore = useUserStore();

const array = ['男', '女']
let index = ref(0);
function bindSexPickerChange(item:any) {
    console.log('picker发送选择改变，携带值为', item)
    index=item.detail.value
    userInfo.userSex=index
}
let userInfo = reactive({
  userPhone:null,
  userAvatar: "",
  userSign:"",
  userSex:"",
  authentication:0,
  name:""
})
function getUseInfo() {
  return Api.getUserInfo().then(({ data }) => {
        userInfo.userSex=data.userInfo.userSex
        userInfo.name=data.userInfo.name
        userInfo.userPhone=data.userInfo.userName
        userInfo.userSign=data.userInfo.userSign
        userInfo.authentication=data.userInfo.authentication
        userInfo.userAvatar= data.userInfo.userAvatar
        index = data.userInfo.userSex? data.userInfo.userSex:0
  })
}
function updateUserInfo() {
    console.log(userInfo,"userInfo-----------------------------")
    return Api.updateUserInfo(userInfo).then(() => {
        showToast("用户信息更新成功");
        uni.reLaunch({
            url:'/pages/user/index/index'
        })
    })
}

function LoginOut() {
    return Api.loginOut().then(() => {
        uni.removeStorageSync('token');
        userStore.setToken("")
        uni.reLaunch({
            url:'/pages/home/index'
        })
    })
}
function loginout1(){

}

function loginout(){
    uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: function (res) {
            if (res.confirm) {
                console.log('用户点击确定');
                uni.removeStorage({
                    key: 'token',
                    success: function (res) {
                        LoginOut();
                    }
                })

            } else if (res.cancel) {
                console.log('用户点击取消');
            }
        }.bind(this)//可处理uni.shuowModal的异步（即拿不到data里面数据的解决办法）
    });
}

onMounted(() => {
  getUseInfo()
})

onUnmounted(() => {

})

function upload() {
    uni.chooseImage({
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        count: 3,
        success: res => {
            if (res.tempFiles.length > 0) {
                console.log(res.tempFiles,"res.tempFiles")
                //todo 上传完显示图片
                const data=uploadImage(res.tempFiles).then(data => {
                    console.log(data,"上传完的 ====================================")
                    userInfo.userAvatar="https://"+data;
                })
            }
        },
    })
}

</script>

<style lang="scss" scoped>
page{
    background: #f9f9f9;
}
.my-user{
    padding: 0 30rpx;
    padding-top: 40rpx;
    font-family: 思源黑体;

    .card{
        background: #fff;
        border-radius: 30rpx;
        height: 810rpx;
        padding: 0 22rpx 0 22rpx;
        // padding-top: 48rpx;
        .item{
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #E2E2E2;
			padding: 0 22rpx 0 22rpx;
			font-size: 28rpx;
            &:last-child{
                border-bottom: 0;
            }
            .l{
				
            }
            .r{
                display: flex;
                align-items: center;
                color: #B6B6B6;
				.right {
					width: 40rpx;
					height: 40rpx;
					margin-left: 40rpx;
				}
            }
        }
        .item.ava{
            height: 200rpx;
        }
        .item.input{
            height: 120rpx;
            input{
                // width: 400rpx;
				text-align: end;
            }
        }
    }
}
</style>
